/**
 * 布局状态管理 Store
 *
 * 功能说明：
 * - 管理全局布局模式（左侧、顶部、混合）
 * - 控制菜单折叠状态和移动端菜单显示
 * - 管理标签页、头部、侧边栏的配置
 * - 提供布局设置的本地存储和恢复功能
 *
 * 使用场景：
 * - 在组件中切换不同的布局模式
 * - 响应式设计中控制移动端菜单
 * - 用户个性化布局设置的持久化
 *
 * @author CRM Team
 * @version 1.0.0
 */

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

/**
 * 布局模式枚举常量
 * 定义系统支持的三种主要布局模式
 */
export const LAYOUT_MODES = {
  SIDEBAR: 'sidebar',     // 左侧菜单模式（传统后台管理系统布局）
  TOP: 'top',            // 顶部菜单模式（适合内容较少的应用）
  MIX: 'mix'             // 混合模式（顶部一级菜单 + 左侧二级菜单）
}

/**
 * 布局配置数组
 * 包含每种布局模式的详细信息，用于布局选择器组件
 *
 * 配置项说明：
 * - mode: 布局模式标识符
 * - name: 显示名称
 * - description: 布局描述
 * - icon: 图标（用于UI展示）
 * - preview: 预览图片路径
 */
export const LAYOUT_CONFIGS = [
  {
    mode: LAYOUT_MODES.SIDEBAR,
    name: '左侧模式',
    description: '经典的左侧菜单布局，适合功能较多的管理系统',
    icon: '📋',
    preview: '/images/layout-sidebar.png'
  },
  {
    mode: LAYOUT_MODES.TOP,
    name: '顶部模式',
    description: '顶部水平菜单布局，界面更加简洁',
    icon: '📄',
    preview: '/images/layout-top.png'
  },
  {
    mode: LAYOUT_MODES.MIX,
    name: '混合模式',
    description: '顶部+左侧混合布局，兼顾导航层次和空间利用',
    icon: '📊',
    preview: '/images/layout-mix.png'
  }
]

/**
 * 布局状态管理 Store
 * 使用 Pinia 的 Composition API 风格定义
 */
export const useLayoutStore = defineStore('layout', () => {
  // ==================== 响应式状态定义 ====================

  /**
   * 当前布局模式
   * 当前激活的布局模式，默认为左侧模式
   * @type {import('vue').Ref<string>}
   */
  const layoutMode = ref(LAYOUT_MODES.SIDEBAR)

  /**
   * 菜单折叠状态
   * 控制侧边栏菜单是否折叠，true为折叠状态
   * @type {import('vue').Ref<boolean>}
   */
  const isCollapse = ref(false)

  /**
   * 移动端菜单显示状态
   * 控制移动端抽屉菜单的显示/隐藏
   * @type {import('vue').Ref<boolean>}
   */
  const showMobileMenu = ref(false)

  /**
   * 标签页配置对象
   * 控制页面标签页的各种行为
   * @type {import('vue').Ref<{show: boolean, closable: boolean, persistent: boolean}>}
   * @property {boolean} show - 是否显示标签页
   * @property {boolean} closable - 标签页是否可关闭
   * @property {boolean} persistent - 是否持久化标签页状态
   */
  const tabsConfig = ref({
    show: true,        // 显示标签页
    closable: true,    // 允许关闭标签页
    persistent: true   // 刷新页面后保持标签页状态
  })

  /**
   * 头部配置对象
   * 控制顶部导航栏的显示元素
   * @type {import('vue').Ref<{showLogo: boolean, showBreadcrumb: boolean, showFullscreen: boolean, fixed: boolean}>}
   * @property {boolean} showLogo - 是否显示Logo
   * @property {boolean} showBreadcrumb - 是否显示面包屑导航
   * @property {boolean} showFullscreen - 是否显示全屏按钮
   * @property {boolean} fixed - 头部是否固定定位
   */
  const headerConfig = ref({
    showLogo: true,         // 显示Logo
    showBreadcrumb: false,  // 不显示面包屑（避免与标签页重复）
    showFullscreen: true,   // 显示全屏切换按钮
    fixed: true            // 头部固定在顶部
  })

  /**
   * 侧边栏配置对象
   * 控制侧边栏的尺寸和显示
   * @type {import('vue').Ref<{width: number, collapsedWidth: number, showLogo: boolean}>}
   * @property {number} width - 侧边栏展开时的宽度（px）
   * @property {number} collapsedWidth - 侧边栏折叠时的宽度（px）
   * @property {boolean} showLogo - 是否在侧边栏显示Logo
   */
  const sidebarConfig = ref({
    width: 200,           // 展开宽度：200px
    collapsedWidth: 64,   // 折叠宽度：64px（仅显示图标）
    showLogo: true        // 在侧边栏顶部显示Logo
  })

  // ==================== 计算属性定义 ====================

  /**
   * 当前布局配置信息
   * 根据当前布局模式返回对应的配置对象
   * @type {import('vue').ComputedRef<Object>}
   * @returns {Object} 包含当前布局模式的详细配置信息
   */
  const currentLayoutConfig = computed(() => {
    return LAYOUT_CONFIGS.find(config => config.mode === layoutMode.value)
  })

  /**
   * 是否为顶部布局模式
   * @type {import('vue').ComputedRef<boolean>}
   * @returns {boolean} 当前是否为顶部布局模式
   */
  const isTopLayout = computed(() => layoutMode.value === LAYOUT_MODES.TOP)

  /**
   * 是否为侧边栏布局模式
   * @type {import('vue').ComputedRef<boolean>}
   * @returns {boolean} 当前是否为侧边栏布局模式
   */
  const isSidebarLayout = computed(() => layoutMode.value === LAYOUT_MODES.SIDEBAR)

  /**
   * 是否为混合布局模式
   * @type {import('vue').ComputedRef<boolean>}
   * @returns {boolean} 当前是否为混合布局模式
   */
  const isMixLayout = computed(() => layoutMode.value === LAYOUT_MODES.MIX)

  // ==================== 方法定义 ====================

  /**
   * 设置布局模式
   * 切换到指定的布局模式，并保存设置到本地存储
   * @param {string} mode - 布局模式，必须是 LAYOUT_MODES 中的有效值
   * @example
   * setLayoutMode(LAYOUT_MODES.TOP) // 切换到顶部布局
   */
  const setLayoutMode = (mode) => {
    // 验证模式是否有效
    if (Object.values(LAYOUT_MODES).includes(mode)) {
      layoutMode.value = mode
      saveLayoutSettings() // 立即保存到本地存储
    } else {
      console.warn(`无效的布局模式: ${mode}`)
    }
  }

  /**
   * 切换菜单折叠状态
   * 在展开和折叠状态之间切换侧边栏菜单
   * @example
   * toggleCollapse() // 切换折叠状态
   */
  const toggleCollapse = () => {
    isCollapse.value = !isCollapse.value
    saveLayoutSettings() // 保存折叠状态
  }

  /**
   * 切换移动端菜单显示状态
   * 在移动端显示/隐藏抽屉菜单，不会保存到本地存储
   * @example
   * toggleMobileMenu() // 切换移动端菜单
   */
  const toggleMobileMenu = () => {
    showMobileMenu.value = !showMobileMenu.value
  }

  /**
   * 关闭移动端菜单
   * 强制隐藏移动端抽屉菜单，通常在路由切换时调用
   * @example
   * closeMobileMenu() // 关闭移动端菜单
   */
  const closeMobileMenu = () => {
    showMobileMenu.value = false
  }

  /**
   * 更新标签页配置
   * 合并新的配置到现有的标签页配置中
   * @param {Object} config - 要更新的配置项
   * @param {boolean} [config.show] - 是否显示标签页
   * @param {boolean} [config.closable] - 标签页是否可关闭
   * @param {boolean} [config.persistent] - 是否持久化标签页状态
   * @example
   * updateTabsConfig({ show: false }) // 隐藏标签页
   */
  const updateTabsConfig = (config) => {
    tabsConfig.value = { ...tabsConfig.value, ...config }
    saveLayoutSettings() // 保存配置更改
  }

  /**
   * 更新头部配置
   * 合并新的配置到现有的头部配置中
   * @param {Object} config - 要更新的配置项
   * @param {boolean} [config.showLogo] - 是否显示Logo
   * @param {boolean} [config.showBreadcrumb] - 是否显示面包屑导航
   * @param {boolean} [config.showFullscreen] - 是否显示全屏按钮
   * @param {boolean} [config.fixed] - 头部是否固定定位
   * @example
   * updateHeaderConfig({ showBreadcrumb: true }) // 显示面包屑导航
   */
  const updateHeaderConfig = (config) => {
    headerConfig.value = { ...headerConfig.value, ...config }
    saveLayoutSettings() // 保存配置更改
  }

  /**
   * 更新侧边栏配置
   * 合并新的配置到现有的侧边栏配置中
   * @param {Object} config - 要更新的配置项
   * @param {number} [config.width] - 侧边栏展开时的宽度
   * @param {number} [config.collapsedWidth] - 侧边栏折叠时的宽度
   * @param {boolean} [config.showLogo] - 是否在侧边栏显示Logo
   * @example
   * updateSidebarConfig({ width: 240 }) // 调整侧边栏宽度
   */
  const updateSidebarConfig = (config) => {
    sidebarConfig.value = { ...sidebarConfig.value, ...config }
    saveLayoutSettings() // 保存配置更改
  }

  // ==================== 本地存储相关方法 ====================

  /**
   * 保存布局设置到本地存储
   * 将当前的布局配置序列化并存储到 localStorage 中
   * 存储的数据包括：布局模式、折叠状态、各组件配置等
   *
   * 存储键名：'layout-settings'
   * 存储格式：JSON字符串
   *
   * @example
   * saveLayoutSettings() // 保存当前所有布局设置
   */
  const saveLayoutSettings = () => {
    try {
      const settings = {
        layoutMode: layoutMode.value,
        isCollapse: isCollapse.value,
        tabsConfig: tabsConfig.value,
        headerConfig: headerConfig.value,
        sidebarConfig: sidebarConfig.value
      }
      localStorage.setItem('layout-settings', JSON.stringify(settings))
    } catch (error) {
      console.error('保存布局设置失败:', error)
    }
  }

  /**
   * 从本地存储恢复布局设置
   * 从 localStorage 中读取之前保存的布局配置并应用
   * 如果没有存储的设置或解析失败，则使用默认值
   *
   * 恢复的设置包括：
   * - 布局模式（默认：侧边栏模式）
   * - 菜单折叠状态（默认：展开）
   * - 标签页、头部、侧边栏配置（使用默认配置合并）
   *
   * @example
   * restoreLayoutSettings() // 在应用启动时恢复用户设置
   */
  const restoreLayoutSettings = () => {
    try {
      const stored = localStorage.getItem('layout-settings')
      if (stored) {
        const settings = JSON.parse(stored)

        // 恢复布局模式，确保是有效值
        layoutMode.value = Object.values(LAYOUT_MODES).includes(settings.layoutMode)
          ? settings.layoutMode
          : LAYOUT_MODES.SIDEBAR

        // 恢复折叠状态
        isCollapse.value = Boolean(settings.isCollapse)

        // 恢复各组件配置，使用合并策略保证完整性
        if (settings.tabsConfig) {
          tabsConfig.value = { ...tabsConfig.value, ...settings.tabsConfig }
        }
        if (settings.headerConfig) {
          headerConfig.value = { ...headerConfig.value, ...settings.headerConfig }
        }
        if (settings.sidebarConfig) {
          sidebarConfig.value = { ...sidebarConfig.value, ...settings.sidebarConfig }
        }
      }
    } catch (error) {
      console.error('恢复布局设置失败:', error)
      // 发生错误时不影响应用正常运行，使用默认设置
    }
  }

  /**
   * 重置布局设置为默认值
   * 将所有布局相关的设置恢复到初始状态，并保存到本地存储
   *
   * 重置的设置包括：
   * - 布局模式：侧边栏模式
   * - 菜单状态：展开状态
   * - 移动端菜单：隐藏状态
   * - 标签页：显示、可关闭、持久化
   * - 头部：显示Logo、隐藏面包屑、显示全屏按钮、固定定位
   * - 侧边栏：200px宽度、64px折叠宽度、显示Logo
   *
   * @example
   * resetLayoutSettings() // 重置所有布局设置
   */
  const resetLayoutSettings = () => {
    // 重置为默认值
    layoutMode.value = LAYOUT_MODES.SIDEBAR
    isCollapse.value = false
    showMobileMenu.value = false

    // 重置标签页配置
    tabsConfig.value = {
      show: true,
      closable: true,
      persistent: true
    }

    // 重置头部配置
    headerConfig.value = {
      showLogo: true,
      showBreadcrumb: false,
      showFullscreen: true,
      fixed: true
    }

    // 重置侧边栏配置
    sidebarConfig.value = {
      width: 200,
      collapsedWidth: 64,
      showLogo: true
    }

    // 保存重置后的设置
    saveLayoutSettings()
  }

  // ==================== Store 返回对象 ====================

  /**
   * 返回 Store 的公共 API
   * 包含所有响应式状态、计算属性和方法
   *
   * 使用方式：
   * ```javascript
   * import { useLayoutStore } from '@/stores/layout'
   *
   * const layoutStore = useLayoutStore()
   *
   * // 访问状态
   * console.log(layoutStore.layoutMode)
   *
   * // 调用方法
   * layoutStore.setLayoutMode(LAYOUT_MODES.TOP)
   *
   * // 使用计算属性
   * if (layoutStore.isTopLayout) {
   *   // 顶部布局特殊处理
   * }
   * ```
   */
  return {
    // ==================== 响应式状态 ====================
    layoutMode,          // 当前布局模式
    isCollapse,          // 菜单折叠状态
    showMobileMenu,      // 移动端菜单显示状态
    tabsConfig,          // 标签页配置
    headerConfig,        // 头部配置
    sidebarConfig,       // 侧边栏配置

    // ==================== 计算属性 ====================
    currentLayoutConfig, // 当前布局配置信息
    isTopLayout,         // 是否为顶部布局
    isSidebarLayout,     // 是否为侧边栏布局
    isMixLayout,         // 是否为混合布局

    // ==================== 操作方法 ====================
    setLayoutMode,       // 设置布局模式
    toggleCollapse,      // 切换菜单折叠状态
    toggleMobileMenu,    // 切换移动端菜单
    closeMobileMenu,     // 关闭移动端菜单
    updateTabsConfig,    // 更新标签页配置
    updateHeaderConfig,  // 更新头部配置
    updateSidebarConfig, // 更新侧边栏配置
    saveLayoutSettings,  // 保存设置到本地存储
    restoreLayoutSettings, // 从本地存储恢复设置
    resetLayoutSettings  // 重置为默认设置
  }
})

/**
 * 使用说明：
 *
 * 1. 在组件中使用：
 *    ```javascript
 *    import { useLayoutStore } from '@/stores/layout'
 *    const layoutStore = useLayoutStore()
 *    ```
 *
 * 2. 在应用启动时恢复设置：
 *    ```javascript
 *    // main.js 或 App.vue
 *    const layoutStore = useLayoutStore()
 *    layoutStore.restoreLayoutSettings()
 *    ```
 *
 * 3. 响应式使用：
 *    ```javascript
 *    // 在模板中直接使用
 *    <div :class="{ 'is-collapse': layoutStore.isCollapse }">
 *
 *    // 在计算属性中使用
 *    const sidebarWidth = computed(() =>
 *      layoutStore.isCollapse
 *        ? layoutStore.sidebarConfig.collapsedWidth
 *        : layoutStore.sidebarConfig.width
 *    )
 *    ```
 *
 * 4. 布局切换：
 *    ```javascript
 *    // 切换到顶部布局
 *    layoutStore.setLayoutMode(LAYOUT_MODES.TOP)
 *
 *    // 切换菜单折叠状态
 *    layoutStore.toggleCollapse()
 *    ```
 */
